<script>
import FormRender from '@/components/FreeForm/render/index.vue'
import { getBpmRule } from '@/api/bpm/rules'
import { isEmpty } from 'lodash'
import ProcessImage from '@/components/PrcoessImage/index.vue'
import { getActiveProcessDefinitionByKey } from '@/api/bpm/definition'
import { submitTask } from '@/api/business/business'

const processTags = () => {
  return [
    { tag: 'procedure-process', key: 'System_Test_02', name: '环保手续' },
    { tag: 'danger-process', key: 'System_Test_02', name: '环保隐患' },
    { tag: 'collect-process', key: 'System_Test_02', name: '环保采集' },
    { tag: 'factor-process', key: 'System_Test_01', name: '环保因素' },
    { tag: 'index-process', key: 'System_Test_01', name: '环保指标' },
    { tag: 'emergency-process', key: 'System_Test_02', name: '环保应急预案' }
  ]
}

export default {
  name: 'StartTask',
  components: { ProcessImage, FormRender },
  data() {
    return {
      ctx: {
        data: null,
        vars: null,
        formKey: null,
        businessKey: null
      },
      taskInfo: null,
      bpmRule: null,
      definition: null
    }
  },
  created() {
    const href = window.location.href || ''
    const tags = href.split('/')
    let tag = tags[tags.length - 1]
    tag = processTags().find(e => e.tag === tag)
    this.taskInfo = tag
    this.taskInfo.processDefinitionKey = this.taskInfo.key
    this.getProcessDefinitionInfo()
    this.getProcessRule()
  },
  methods: {
    getProcessRule() {
      const data = {
        processInstanceId: this.taskInfo.processInstanceId,
        modelKey: this.taskInfo.processDefinitionKey,
        nodeCode: this.taskInfo.taskDefinitionKey
      }
      getBpmRule(data).then(res => {
        this.bpmRule = res.data
        if ((isEmpty(this.bpmRule) || isEmpty(this.bpmRule.formCode))) {
          return this.$message.error('流程未配置页面，请配置对应的处理页面')
        }
        this.ctx.formKey = this.bpmRule.formCode
        this.taskInfo.name = this.bpmRule.nodeName
        this.taskInfo.taskDefinitionKey = this.bpmRule.nodeCode
        this.taskInfo.comment = this.bpmRule.comment
      })
    },
    getProcessDefinitionInfo() {
      if (!this.taskInfo.processDefinitionKey) return
      getActiveProcessDefinitionByKey(this.taskInfo.processDefinitionKey).then(res => {
        this.definition = res.data
        this.taskInfo.processDefinitionId = this.definition.id
      })
    },
    submit() {
      this.$refs.formRender.validate().then((instance) => {
        instance.process = this.taskInfo
        instance.process.executeCmd = 'submit'
        instance.task = instance.process
        this.loading = true
        submitTask(instance).then(() => {
          this.$message.success('任务提交成功')
        }).finally(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<template>
  <el-container class="handle-task">
    <el-main>
      <form-render
        ref="formRender"
        v-model="ctx.data"
        :vars.sync="ctx.vars"
        :form-code="ctx.formKey"
        :business-key="ctx.businessKey"
        :is-design="false"
      />
    </el-main>

    <el-footer height="50px">
      <div class="handle-task__footer">
        <el-button size="small" icon="el-icon-back" @click="$router.back()">返回</el-button>
        <el-button size="small" icon="el-icon-s-home" @click="$router.push('/')">首页</el-button>
        <el-button size="small" icon="el-icon-edit-outline" type="primary" @click="submit">提交</el-button>
      </div>
    </el-footer>
  </el-container>
</template>

<style scoped lang="scss">
.handle-task {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #f3f3f3;
}

.el-main {
  padding: 10px;
}

.handle-task__footer {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #dcdcdc;
}

.el-footer {
  padding: 0;
  background: #fff;
}

::v-deep .el-form-item {
  margin-bottom: 10px;
}
</style>
